<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zhuce</title>
    <link rel="stylesheet" href="../css/register.css">
</head>

<body>

    <div id="wrapper">
        <div class="registerBox w">
            <div class="registerBox-logo">
                <img src="../../xiaomi-img/MI.png" alt="">
            </div>
            <h4 class="registerBox-h">注册小米账号</h4>
            <div class="registerBox-main">
                <div class="username cl">
                    <div class="username-l">
                        <span>账号</span>
                        <input type="text" id="username" placeholder="请输入账号">
                    </div>

                    <div class="tishi-a">
                        <span class="tishi-a-1" style="color: red">请输入正确的账号</span>
                        <span class="tishi-a-2" style="color: green">√</span>
                    </div>
                </div>

                <div class="usertel  cl">
                    <div class="usertel-l">
                        <span>电话</span>
                        <input type="text" id="telephone" placeholder="请输入电话">
                    </div>
                    <div class="tishi-b">
                        <span class="tishi-b-a" style="color: red">请输入正确的电话</span>
                        <span class="tishi-b-b" style="color: green">√</span>
                    </div>

                </div>

                <div class="userpwd cl">
                    <div class="userpwd-l">
                        <span>密码</span>
                        <input type="text" id="password" placeholder="请输入密码">
                    </div>
                    <div class="tishi-c">
                        <span class="tishi-c-a" style="color: red">请输入正确的密码</span>
                        <span class="tishi-c-b" style="color: green">√</span>
                    </div>

                </div>

                <div class="re-userpwd cl">
                    <div class="re-userpwd-l">
                        <span>确认密码</span>
                        <input type="text" placeholder="请确认密码" id="repwd">
                    </div>

                    <div class="tishi-d">
                        <span class="tishi-d-a" style="color: red">请输入相同密码</span>
                        <span class="tishi-d-b" style="color: green">√</span>
                    </div>

                </div>


            </div>

            <div class="registerBox-btn">
                <button class="register-btn">立即注册</button>
            </div>

            <div class="register-bottom">
                <span>已阅读并同意：小米 </span>
                <span style="color: black;font-weight: 700;">
                    <用户协议>
                </span>
                <span>和</span>
                <span style="color: black;font-weight: 700;">
                    <隐私政策>
                </span>
            </div>

        </div>

        <div class="footer w">
            <ul class="footer-top cl">
                <li>简体<span>|</span></li>

                <li>繁体<span>|</span></li>

                <li>English<span>|</span></li>

                <li>常见问题</li>
            </ul>

            <p>
                <span>小米公司版权所有-京ICP备10046444-</span>
                <img src="../../xiaomi-img/record-icon.d0289dc0.png" alt="">
                <span>京公网安备11010802020134号-京ICP证110507号</span>
            </p>
        </div>
    </div>
</body>
<script src="../js/jquery-1.11.3.js"></script>

<script>

    $('.register-btn').click(function () {
        //请输入由数字字母_$组成的长度6到10位不能以数字开头
        var reg1 = /^[a-zA-Z_$][0-9a-zA-Z_$]{5,9}$/
        var result1 = reg1.test($('#username').val())


        var num1
        var num2
        var num3
        var num4
        if (result1 == false) {
            $('.tishi-a-1').show()
            $('.tishi-a-2').hide()

        } else {
            $('.tishi-a-2').show()
            $('.tishi-a-1').hide()
            num1 = 1
        }

        //电话
        var reg2 = /^1[0-9]{10}$/
        var result2 = reg2.test($('#telephone').val())



        if (result2 == false) {
            $('.tishi-b-a').show()
            $('.tishi-b-b').hide()
        } else {
            $('.tishi-b-b').show()
            $('.tishi-b-a').hide()
            num2 = 1
        }

        //请输入长度6到12位的数字和字母组成    
        var reg3 = /^[0-9a-zA-Z][0-9a-zA-Z]{5,11}$/
        var result3 = reg3.test($('#password').val())
        if (result3 == false) {
            $('.tishi-c-a').show()
            $('.tishi-c-b').hide()
        } else {
            $('.tishi-c-b').show()
            $('.tishi-c-a').hide()
            num3 = 1
        }

        //// 确认密码

        if ($('#repwd').val() == $('#password').val() && $('#repwd').val() != '') {

            $('.tishi-d-b').show()
            $('.tishi-d-a').hide()
            num4 = 1


        } else {
            $('.tishi-d-a').show()
            $('.tishi-d-b').hide()
        }

        var sum = num1 + num2 + num3 + num4

        if (sum == 4) {
            $.ajax({
                type: 'get',
                url: "http://localhost/project/xiaomi/php/mi_register.php",
                data: {
                    username: $('#username').val(), password: $('#password').val(),
                    telephone: $('#telephone').val()
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code > 0) {
                        location.href = 'Login.html'
                    } else {
                        alert(data.msg)
                    }
                }

            })
        }
    })





</script>

</html>